<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-element">
	<template>
		<p>{{name}}</p>
		<button on-click="handleClick">子组件</button>
	</template>
	<script>
		MyElement = Polymer({
			is: 'my-element',
			properties: {
				name: {
					value: "我是tom",
					type: "String"
				}
			},
			handleClick: function() { //改变属性的值
				this.setAttribute("name", "我是子组件，我把我自己改变了");
			},
			attributeChanged: function(name, type) { //改变属性的值会触发这个事件
				console.log(this.localName + '#' + this.id + ' attribute ' + name + ' was changed to ' + this.getAttribute(name));
			},
			created: function() { //当组件被 new 时调用，最早被触发，此时还不能访问组件的属性
				console.log("我是子组件，我被new出来了" + this.localName + '#' + this.id + ' was created');
			},
			ready: function() { //当组件内部依赖的子组件或者原生dom组件加载成功，会调用ready
				console.log("我是子组件，我的子组件和原生DOM全部加载成功了" + this.localName + '#' + this.id + ' was ready');
			},
			attached: function() { //组件被添加到父组件中（显示在舞台）时触发，只会触发一次
				console.log("我是子组件，我被添加到了我的父组件之中了" + this.localName + '#' + this.id + ' was attached');
			},
			detached: function() { //当被父组件removeChild时候触发（即被移出舞台）
				console.log("我是子组件，我被父组件给移除了" + this.localName + '#' + this.id + ' was detached');
			},
			factoryImpl: function() {
				console.log(this.localName + '#' + this.id + ' was factoryImpl');
			}
		});
	</script>
</dom-module>